{% extends 'myhome/index.html' %}
{% block tit %}
    <title>购物车</title>
{% endblock %}
{% block css %}
    <link href="/static/myhome/css/cartstyle.css" rel="stylesheet" type="text/css" />
    <link href="/static/myhome/css/optstyle.css" rel="stylesheet" type="text/css" />
{% endblock %}

{% block con %}
    <div class="concent">


        <div id="cartTable">
            <div class="cart-table-th">
                <div class="wp">
                    <div class="th th-chk">
                        <div id="J_SelectAll1" class="select-all J_SelectAll"></div>
                    </div>
                    <div class="th th-item">
                        <div class="td-inner">商品信息</div></div>
                    <div class="th th-price">
                        <div class="td-inner">单价</div></div>
                    <div class="th th-amount">
                        <div class="td-inner">数量</div></div>
                    <div class="th th-sum">
                        <div class="td-inner">金额</div></div>
                    <div class="th th-op">
                        <div class="td-inner">操作</div></div>
                </div>
            </div>
            <div class="clear"></div>
            <tr class="item-list">
               
                    <div class="clear"></div>
                    <div class="bundle-main">
                        {% for i in  data %}

                        <ul class="item-content clearfix">


                            <li class="td td-chk">
                                <div class="cart-checkbox ">
                                    <input class="check" id="J_CheckBox_170037950254" name="items[]" value="{{i.id}}" type="checkbox">
                                    <label for="J_CheckBox_170037950254"></label>
                                </div>
                            </li>


                            <li class="td td-item">
                                <div class="item-pic">
                                    <a href="#" target="_blank" data-title="美康粉黛醉美东方唇膏口红正品 持久保湿滋润防水不掉色护唇彩妆" class="J_MakePoint" data-point="tbcart.8.12">
                                        <img src="{{ i.goodsid.pic_url }}" class="itempic J_ItemImg" width="100"></a>
                                </div>
                                <div class="item-info">
                                    <div class="item-basic-info">
                                        <a href="#" target="_blank" title="{{ i.goodsid.title }}" class="item-title J_MakePoint" data-point="tbcart.8.11">{{ i.goodsid.title }}</a></div>
                                </div>
                            </li>


                            <li class="td td-info">
                                <div class="item-props ">
                                    
                                </div>
                            </li>


                            <li class="td td-price">
                                <div class="item-price price-promo-promo">
                                    <div class="price-content">
                                     
                                        <div class="price-line">
                                            <em class="J_Price price-now" tabindex="0">{{ i.goodsid.price }}</em></div>
                                    </div>
                                </div>
                            </li>


                            <li class="td td-amount">
                                <div class="amount-wrapper ">
                                    <div class="item-amount ">
                                        <div class="sl">
                                        <input class="min am-btn" name="" type="button" value="-" />
                                        <input class="text_box cartnum" cartid="{{ i.id }}" name="" type="text" value="{{ i.num }}" style="width:30px;"/>
                                        <input class="add am-btn" name="" type="button" value="+" />
                                    </div>
                                </div>
                            </li>


                            <li class="td td-sum">
                                <div class="td-inner">
                                    <em tabindex="0" class="J_ItemSum number">
                                        {% load pagetag %}
                                        {% cartsum i.num i.goodsid.price %}
                                    </em>
                                </div>
                            </li>


                            <li class="td td-op">
                                <div class="td-inner">
                                    <a title="移入收藏夹" class="btn-fav" href="#">移入收藏夹</a>
                                    <a href="{% url 'myhome_cartdelOne' %}?gid={{i.id }}" data-point-url="#" class="delete">删除</a></div>
                            </li>


                        </ul>
                        {% endfor %}
                        
                 
                    </div>
                </div>
            </tr>
            



        <div class="clear"></div>
        <div class="float-bar-wrapper">
            <div id="J_SelectAll2" class="select-all J_SelectAll">
                <div class="cart-checkbox">
                    <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
                    <label for="J_SelectAllCbx2"></label>
                </div>
                <span>全选</span></div>
            <div class="operations">
                <a href="javascript:void(0)" hidefocus="true" class="deleteAll">删除</a>
                <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a></div>
            <div class="float-bar-right">
                <div class="amount-sum">
                    <span class="txt">已选商品</span>
                    <em id="J_SelectedItemsCount">0</em>
                    <span class="txt">件</span>
                    <div class="arrow-box">
                        <span class="selected-items-arrow"></span>
                        <span class="arrow"></span>
                    </div>
                </div>
                <div class="price-sum">
                    <span class="txt">合计:</span>
                    <strong class="price">¥
                        <em id="J_Total">0.00</em></strong>
                </div>
                <div class="btn-area">
                    <a href="javascript:void(0)" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                        <span>结&nbsp;算</span></a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            // 删除
            $('.deleteAll').click(function(){
                // 获取 所选的购物车id
                var cartids = Com()
                console.log(cartids)
               
                // 判断是否选择了商品
                if(!cartids.length){
                    // 没有选择商品
                    alert('请注意如果没有选择宝贝，将无法结算');
                    return;
                }
                // 把数组转为json格式字符串,
                var res = JSON.stringify( cartids );
                location.href="{% url 'myhome_cartdel' %}?cartids="+res
            })
            // 给结算绑定单击事件
            $('#J_Go').click(function(){
                // 获取 所选的购物车id
                var cartids = Com()
                // 判断是否选择了商品
                if(!cartids.length){
                    // 没有选择商品
                    alert('请注意如果没有选择宝贝，将无法结算');
                    return;
                }
                // 把数组转为json格式字符串,
                var res = JSON.stringify( cartids );
                location.href="{% url 'myhome_orderconfirm' %}?cartids="+res
            })


            // 加
            $('.add').click(function(){
                var t = $(this).parent().find('input[class*="text_box"]')
                t.val(parseInt(t.val())+1)
                changenum(t)
            })
            // 减
            $('.min').click(function(){
                var t = $(this).parent().find('input[class*="text_box"]')
                t.val(parseInt(t.val()) - 1)
                // 判断件数少于1件则 件数为0
                if(parseInt(t.val()) < 1){
                    t.val(0);
                }
                changenum(t)
            })
       
            $('.cartsum').blur(function(){
                changenum($(this))
            })
            function changenum(t){
                var newnum = Number(t.val())
                var cartid = t.attr('cartid')
                // 判断newnum
                if(newnum < 1){
                    return;
                }
                $.get('{% url "myhome_cartedit" %}',{'cartid':cartid,'num':newnum},function(data){
                    // 修改当前购物车商品数量小计
                    t.parents('ul').find('.J_ItemSum').text(data.totalprice)
                    Com()
                },'json')
            }
            // 给选框绑定单击事件
             $('.check[name!=select-all]').click(function(){
                Com()
            })

            // 总计
            function Com(){
                var TotalPrice = 0
                var TotalNum = 0
                var cartids = []
                // 获取页面中所以已经选中的元素
                $('.check[name!=select-all]').each(function(){
                    var res = $(this).prop('checked')
                    if(res){
                        // 获取当前小计 和 商品数量
                        TotalPrice += Number($(this).parents('ul').find('.J_ItemSum').text())
                        TotalNum += Number($(this).parents('ul').find('.cartnum').val())
                        cartids.push($(this).val())
                    }
                })
                $('#J_SelectedItemsCount').text(TotalNum)
                $('#J_Total').text(TotalPrice.toFixed(2))
                return cartids
            }
            $('#J_SelectAllCbx2').click(function(){
                $('.check').prop('checked',$(this).prop('checked'))
                Com()
            })
        })
    </script>
{% endblock %}